<template>
    <div class="Parentbox">
        <div class="bovin">
            <div class="Typecenter">
                <!-- 顶部 -->
                <div>
                    <!-- log搜索 -->
                </div>
                <div style="height: 10px;"></div>
                <div style="margin-left: 143px; display: flex;">
                    <div>
                        <el-card class="bankone">
                            <div style="display: flex;justify-content: center;">
                                <img src="@/assets/images/bankone.png" alt="">
                            </div>

                        </el-card>
                        <div style="height: 20px;"></div>
                        <el-card class="banktwp">

                        </el-card>
                    </div>
                    <div style="margin-left: 8px;">
                        <div style="height: 253px;">
                            <el-image :src="url"></el-image>
                        </div>
                        <div style="height: 10px;"></div>
                        <el-card class="sales">
                            <div class="typeface">
                                <span>默认</span>
                                <span style=" display: inline; margin-left: 40px;">销量</span>
                                <span style=" display: inline; margin-left: 40px;">价格</span>
                                <i class="el-icon-caret-bottom"></i>
                                <i class="el-icon-caret-top"></i>
                            </div>
                            <div>
                                <el-input size="small " placeholder="请输入内容"
                                    style="width: 310px; transform: translate(580px,-32px);">
                                    <el-button type="primary" slot="append">
                                        <i class="el-icon-search"></i>
                                    </el-button>
                                </el-input>
                            </div>

                        </el-card>
                        <div class="boxone">
                            <div class="box" v-for="item in data" :key="item.id" @click="handleClick(item.id)">
                                <div style="margin: 10px 0 5px 8px; font-size: 20px; font-weight: 700;">
                                    {{ item.freight }}
                                </div>
                                <div style="color: #02a7f2; margin-left: 12px;">{{ item.site }}</div>
                                <div style="  margin-left: 8px; margin-top: 34px; font-size: 12px; color: #fbd7b1;">{{
                                    item.age }}</div>
                                <div style="display: flex;">
                                    <div>
                                        <div
                                            style=" margin-left: 8px; margin-top: 20px; font-size: 13px;  margin-right: 45px;">
                                            {{
                                                item.Financingterm }}</div>
                                        <div style="  margin-left: 8px;  margin-top: 20px;  font-size: 13px;">{{ item.money
                                        }}</div>
                                    </div>
                                    <div>
                                        <div style=" margin-top: 20px; font-size: 13px;">{{ item.guarantee }}</div>
                                        <div style="margin-left: 5px; margin-top: 20px; font-size: 13px;">{{ item.sumone }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <el-row type="flex">
                                <el-col>
                                    <el-row type="flex" justify="end">
                                        <el-pagination background layout="total, prev, pager, next" :total="1">
                                        </el-pagination>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex"
export default {
    computed: {
        ...mapState({ information: state => state.data })
    },
    data() {
        return {
            active: 0,
            url: require(`@/assets/images/area.png`),
            data: []
        }
    },
    created() {
        this.listone()
    },
    methods: {
        listone() {
            this.data = this.information
            // console.log(this.data, '登陆数据');
        },
        handleClick(id) {
            // console.log(id, '点击第一个div盒子');
            if (id === 1) {
                this.$router.push('/commodity')
            }
        }
    }
}
</script>

<style lang="less" scoped>
.Typecenter {
    height: 1038px;
    background-color: #f7f8fa;

    .boxone {
        display: flex;
        flex-wrap: wrap;
        width: 1075px;
        height: 509px;
        margin-top: 15px;

        .box {
            width: 341px;
            height: 222px;
            margin-left: 14px;
            margin-bottom: 23px;
            background-color: #ffffff;
        }
    }


    .sales {
        display: flex;
        width: 921px;
        height: 50px;

        .typeface {

            position: relative;
            top: -5px;
            left: 0px;

            .el-icon-caret-bottom {
                position: absolute;
                top: 6px;
                right: 113px;
                color: #adadad;
            }

            .el-icon-caret-top {
                position: absolute;
                top: -2px;
                right: 113px;
                color: #adadad;
            }
        }
    }

    .bankone {
        width: 238px;
        height: 321px;
    }

    .banktwp {
        width: 238px;
        height: 175px;
    }

    .ionone {
        position: relative;

        .ion {
            position: absolute;
            top: 3px;
            left: 10px;
        }
    }
}

/deep/.el-button--primary {
    width: 80px;
}
</style>